<template>
  <div class="order-detail">
    <div class="page-header">
      <h2>订单详情</h2>
      <div>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
    
    <el-card class="box-card">
      <el-descriptions title="订单信息" :column="2" border>
        <el-descriptions-item label="订单号">{{orderInfo.id}}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{orderInfo.createTime}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag type="success" v-if="orderInfo.status === 'completed'">已完成</el-tag>
          <el-tag type="warning" v-else-if="orderInfo.status === 'pending'">待付款</el-tag>
          <el-tag type="info" v-else>已取消</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">{{orderInfo.paymentMethod}}</el-descriptions-item>
        <el-descriptions-item label="买家">{{orderInfo.buyer}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{orderInfo.phone}}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    
    <el-card class="box-card" style="margin-top: 20px;">
      <div class="card-header">
        <div class="card-title">商品信息</div>
      </div>
      <div class="card-body">
        <el-table :data="orderInfo.items" border style="width: 100%">
          <el-table-column prop="productId" label="商品ID" width="120"></el-table-column>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="单价" width="100"></el-table-column>
          <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
          <el-table-column prop="subtotal" label="小计" width="100"></el-table-column>
        </el-table>
        
        <div class="order-summary">
          <div class="summary-item">
            <span class="label">商品总额：</span>
            <span class="value">¥{{orderInfo.totalAmount}}</span>
          </div>
          <div class="summary-item">
            <span class="label">运费：</span>
            <span class="value">¥{{orderInfo.shippingFee}}</span>
          </div>
          <div class="summary-item">
            <span class="label">优惠：</span>
            <span class="value">-¥{{orderInfo.discount}}</span>
          </div>
          <div class="summary-item total">
            <span class="label">实付款：</span>
            <span class="value">¥{{orderInfo.payAmount}}</span>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card class="box-card" style="margin-top: 20px;" v-if="orderInfo.status === 'completed'">
      <div class="card-header">
        <div class="card-title">物流信息</div>
      </div>
      <div class="card-body">
        <el-steps :active="orderInfo.logistics.length" direction="vertical">
          <el-step 
            v-for="(item, index) in orderInfo.logistics" 
            :key="index" 
            :title="item.status" 
            :description="item.time">
          </el-step>
        </el-steps>
      </div>
    </el-card>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    return {
      router,
      route
    }
  },
  data() {
    return {
      orderInfo: {
        id: '',
        createTime: '',
        status: '',
        paymentMethod: '',
        buyer: '',
        phone: '',
        items: [],
        totalAmount: 0,
        shippingFee: 0,
        discount: 0,
        payAmount: 0,
        logistics: []
      }
    }
  },
  created() {
    // 获取订单ID
    const id = this.route.params.id;
    // 这里获取订单详情数据
    this.fetchOrderDetail(id);
  },
  methods: {
    goBack() {
      this.router.go(-1);
    },
    fetchOrderDetail(id) {
      // 模拟获取数据
      if (id === 'O2023112001') {
        this.orderInfo = {
          id: 'O2023112001',
          createTime: '2023-11-20 09:15:32',
          status: 'completed',
          paymentMethod: '微信支付',
          buyer: '张三',
          phone: '13800138000',
          items: [
            {
              productId: 1,
              productName: '智能手环',
              price: '299.00',
              quantity: 1,
              subtotal: '299.00'
            }
          ],
          totalAmount: 299.00,
          shippingFee: 10.00,
          discount: 30.00,
          payAmount: 279.00,
          logistics: [
            {
              status: '已签收',
              time: '2023-11-23 14:30:00'
            },
            {
              status: '派送中',
              time: '2023-11-23 09:15:00'
            },
            {
              status: '运输中',
              time: '2023-11-22 18:45:00'
            },
            {
              status: '已发货',
              time: '2023-11-21 10:30:00'
            },
            {
              status: '订单已完成',
              time: '2023-11-20 09:15:32'
            }
          ]
        };
      }
    }
  }
}
</script>

<style scoped>
.order-detail {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}

.card-body {
  min-height: 100px;
}

.order-summary {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}

.summary-item {
  margin-bottom: 10px;
}

.summary-item .label {
  margin-right: 10px;
  color: #606266;
}

.summary-item.total {
  font-weight: bold;
  color: #f56c6c;
}
</style> 